<template>
<div  v-loading="loading">
  <el-row><h1 class="h1-style">当前拥有客户量: <el-tag>400</el-tag> </h1></el-row>
  <el-row class="margin-top">
 <div id="main" style="width: 50%;height:400px;"></div>
 <div id="main2" style="width:45%;height:500px; margin-left:40px;"></div>
  </el-row>
</div>
</template>
<script lang="ts">
import { defineComponent,onMounted,nextTick,ref,onBeforeMount,onUnmounted } from 'vue'
import * as echarts from 'echarts'
import {successMessage,errorMessage} from '@/utils/messageTips/index'
export default defineComponent({
  name:'PageOne',
  setup(){
// 图表区
  let loading = ref<boolean>(true)
  let   chartDom:HTMLElement
  let   myChart:echarts.EChartsType
  let   chartDom2:HTMLElement
  let   myChart2:echarts.EChartsType
 onMounted(()=>{
type EChartsOption = echarts.EChartsOption;
  chartDom = document.getElementById('main')!;
   myChart = echarts.init(chartDom);
var option: EChartsOption;
     option = {
  title:{
   show:true,
   text:"一周的用户访问量",
   textStyle:{
     color:"#333"
   }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [50, 34, 90, 200, 45, 200, 65],
      type: 'line',
      smooth: true
    }
  ],
  tooltip:{
    show:true
  }
}

option && myChart.setOption(option)
// 饼形状
 chartDom2 = document.getElementById('main2')!
 myChart2 = echarts.init(chartDom2);
var option2:EChartsOption;

option2 = {
  title: {
    text: '各活动的秒杀量',
    subtext:"更新前一天的",
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '售卖数量',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '三湘黄金' },
        { value: 735, name: '银联卡' },
        { value: 580, name: 'PBZP16F6私银' },
        { value: 484, name: 'PBZP16F6私银2' },
        { value: 300, name: 'PBZP16F6私银3' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
option2 && myChart2.setOption(option2);
     successMessage("绘制成功")
     loading.value = false
    }) 
onUnmounted(()=>{
  // 切换页面的时候要销毁，不销毁返回的时候就会不显示
   myChart.dispose()
   myChart2.dispose()
   
})
    return{
     loading
 }
 }
 
})
</script>
<style lang="less" scoped>
  .margin-top{
    margin-top: 1%;
  }
</style>